<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
		<link href="../favicon.ico" mce_href="../favicon.ico" rel="shortcut icon" type="image/x-icon">
		<link href="../css/base.css" rel="stylesheet">
		<script>

		</script>
		<script src="../dist/strawberry-min.js" charset="utf-8"></script>
		<script type="text/javascript">
			const grap = S.grap;
			const frame = S.frame;
			const matrix = S.matrix;
			const gesture = S.gesture;
		</script>
		<title>草莓引擎-头像</title>
		<script>
			function OnLoad() {
				fileObj = new S.FilesObj();
				fileObj.AddRead("./3d/HeadJacket/all.gltf", fileObj.TypeEnum.json, "suzanne_gltf")
				fileObj.AddRead("./3d/HeadJacket/all.bin", fileObj.TypeEnum.arraybuffer, "suzanne_bin")
				fileObj.AddRead("./shader/normal_vert.js", fileObj.TypeEnum.text, "nomal_vert")
				fileObj.AddRead("./shader/normal_head_frag.js", fileObj.TypeEnum.text, "normal_head_frag")
				fileObj.AddRead("./shader/normal_matcap_main_frag.js", fileObj.TypeEnum.text, "normal_main_frag")
				fileObj.OnComplete = () => {
					gltfFile = new S.GltfFile()
					gltfFile.ReadData(fileObj.suzanne_gltf, fileObj.suzanne_bin)
					try {
						//	console.log("buffer-------",gltfFile.meshes[0].primitives)

						Init()
					} catch (e) {
						console.error("Init错误信息:", JSON.stringify(e));
						//	alert("错误信息：",e);
						throw e;
					}
				}
			}

			function Init() {
				//	console.log("gltfFile:",gltfFile)
				//手势操做初始化
				gestureModel = new S.GestureModel()
				gestureModel.SetModel([0, -0, 0], [20, 0, 0])

				grap.BindCanvas();
				grap.AddVertexShaderCodeText(fileObj.nomal_vert)
				grap.AddFragmentShaderCodeText(fileObj.normal_head_frag)
				grap.AddFragmentShaderCodeText(fileObj.normal_main_frag)

				grap.AddTextures("faceMatcap2", "./3d/textures/matcap/skin3b-256.png")

				grap.AddTextures("Matcap_Reflection1", "./3d/textures/matcap/014.png")

				grap.AddTextures("Head_Colour", "./3d/HeadJacket/1024/Head/Colour_8k.jpg")
				grap.AddTextures("Head_Gloss", "./3d/HeadJacket/1024/Head/Gloss_8k.jpg")
				grap.AddTextures("Head_Normal", "./3d/HeadJacket/2048/Head/NormalMap_SubDivision_1.jpg")
				grap.AddTextures("Head_Spec", "./3d/HeadJacket/1024/Head/Spec_8k.jpg")
				grap.AddTextures("Head_Translucency", "./3d/HeadJacket/1024/Head/Translucency.jpg")

				grap.AddTextures("Jacket_Colour", "./3d/HeadJacket/1024/Jacket/Jacket_Colour.jpg")
				grap.AddTextures("Jacket_Gloss", "./3d/HeadJacket/1024/Jacket/Jacket_Gloss.jpg")
				grap.AddTextures("Jacket_Normal", "./3d/HeadJacket/2048/Jacket/Jacket_Normal.jpg")
				grap.AddTextures("Jacket_Spec", "./3d/HeadJacket/1024/Jacket/Jacket_Spec.jpg")

				//模型程序初始化

				programsModel = new S.ProgramsModel()
				programsModel.LightColor(1.0, 1.0, 1.0)
				programsModel.LightDir(0, 0, 1, -10, -10, 0)
				programsModel.AmbientColor(0.0, 0.0, 0.0)


				grap.Blend(grap.BlendType.Normal);
			//	console.log("第一次下载<br>需要稍等一会")
				let time = 0;
				//循环的部份
				grap.OnCompleteTexture = () => {
					loading.classList.add("hide")
					console.log("开始渲染")
					frame.Update = () => {
						time -= 0.001;
						if (time >= 1) time = 0;
						//手势
						gestureModel.Update()

						grap.Clear(0.15, 0.15, 0.15, 1)
						programsModel.Update()
						let buffer
						let modelNode
						grap.SetUniform("valueTime", "1f", time);

						buffer = gltfFile.meshes[0].primitives[0].buffer //单个调用
						programsModel.InitAttrib(buffer)
						grap.SetTexture(0, "Head_Colour", "textureDiffuse")
						grap.SetTexture(1, "Head_Normal", "textureNormal")
						grap.SetTexture(2, "Matcap_Reflection1", "textureMatCatReflection")
						grap.SetTexture(3, "faceMatcap2", "textureMatCatDiffuse")
						grap.SetTexture(4, "Head_Spec", "textureMatteSpecular")
						grap.SetTexture(5, "Head_Gloss", "textureMatteSmoothness")
						grap.SetTexture(6, "Head_Translucency", "textureMatteDiffuse")

						grap.SetUniform("valueLambert", "4f", 1.0, 0.8, 1.4, 1.0);
						grap.SetUniform("valueSpecular", "4f", 40, 0.0, 4.0, 1.0);
						grap.SetUniform("valueFresnel", "4f", 1.0, 0.0, 2.0, 1.0);

						grap.SetUniform("valueMatCatReflection", "4f", 1, 0, 0.6, 1.0);
						grap.SetUniform("valueMatCatDiffuse", "4f", 1.0, 0.0, 1.0, 1.0);
						grap.SetUniform("valueMatteDiffuse", "4f", 1, 0, 0.8, 0)
						grap.SetUniform("valueMatteDiffuseColor", "4f", 0.9, 0.1, 0.0, 1)
						grap.SetUniform("valueMatteSpecular", "4f", 1, 0, 1, 0.0)
						grap.SetUniform("valueMatteSmoothness", "4f", 1, 0, 1, 0)
						grap.SetUniform("valueMapDiffuse", "4f", 1.0, 0.0, 1.4, 0.0);
						grap.SetUniform("valueNormal2TilingOffset", "4f", 0, 20, 0.0, 0.0);
						grap.SetUniform("valueMapEmissive", "4f", 1, 0, 0.0, 0)
						grap.SetUniform("valueLerp", "4f", 0.9, 0.9, 0, 0);
						modelNode = gltfFile.gltfObj.nodes[2];
						gestureModel.SetMatModelOrigGltf(modelNode)
						gestureModel.SetUniform()
						grap.Draw(grap.gl.TRIANGLES);

						buffer = gltfFile.meshes[1].primitives[0].buffer //单个调用
						programsModel.InitAttrib(buffer)
						grap.SetTexture(0, "Jacket_Colour", "textureDiffuse")
						grap.SetTexture(1, "Jacket_Normal", "textureNormal")
						grap.SetTexture(2, "Matcap_Reflection1", "textureMatCatReflection")
						grap.SetTexture(3, "faceMatcap2", "textureMatCatDiffuse")
						grap.SetTexture(4, "Jacket_Spec", "textureMatteSpecular")
						grap.SetTexture(5, "Jacket_Gloss", "textureMatteSmoothness")
						grap.SetUniform("valueSpecular", "4f", 60, 0.0, 4.0, 1.0);
						grap.SetUniform("valueMatteDiffuse", "4f", 1, 0, 0, 0)
						grap.SetUniform("valueMapDiffuse", "4f", 1.2, 0.0, 1.2, 0.0);
						grap.SetUniform("valueLerp", "4f", 0.6, 0.9, 0, 0);
						modelNode = gltfFile.gltfObj.nodes[3];
						gestureModel.SetMatModelOrigGltf(modelNode)
						gestureModel.SetUniform()
						grap.Draw(grap.gl.TRIANGLES);

					};
					frame.Play();
				}
			}
		</script>
	</head>
	<body onload="OnLoad()">
		<div class="layers">
			
			
			
			<!--<img class="layer" style="width:100%;height: 100%;" src="../img/leaf.jpg" >-->
			<canvas class="layer" id="myCanvas" width="600" height="600"></canvas>
			<script src="../common/canvas.js"></script>
			<div id="log" class="layer" style="top:0%; height:15%;"></div>
			<script src="../common/log.js" type="text/javascript" charset="utf-8"></script>
			<script src="../common/versions2.js"></script>
			
			<script src="../common/loading.js"></script>
			
			
		</div>
	</body>

</html>
